<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../../js库/mock.js"></script>
  <script src="../../js库/vue.js"></script>
<title>css文本属性</title>
<style>
  /* 
  
  文本颜色 对齐文本 装饰文本 文本缩进 行间距
  
      文本颜色 color
      对齐文本  本质是盒子内文字对齐
            text-align  只能设置水平对齐  默认左对齐
      装饰文本  下划线，删除线，上划线  给a标签设置线条
          text-decoration
      文本缩进 文本第一行缩进 em相对当前文字的大小2个文字大小
           text-indent 
      行间距   行高=文本高度+上下间距
        line-height
  */
  .color {
    color: rgb(34, 110, 161);
  }
  .al {
    text-align: center;
  }
  .zs {
    text-decoration: line-through;
  }
  a {
    text-decoration: none;
    color: pink;
  }
  .sj {
    /* 文本第一行缩进 */
    text-indent: 2em;
  }
  .hj {
    line-height: 26px;
  }
</style>
</head>
<body>
<div id="root">
  <p class="color">文本颜色</p>
  <p class="al">文本颜色</p>
  <p class="zs">文本颜色</p>
  <a class="dela" href="#">文本颜色</a>
  <div class="sj">{{sj}}</div>
  <div class="hj">eee</div>

  </div>
</body>
<script>
  new Vue({
  el:'#root',
 data() {
 return {
    sj:Mock.mock('@cword(100)'),
   }
 },
 })
</script>
</html>